<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>p3_CSS常用值</title>
        <style>
            h1{
                /*单词表示法*/
                color: red;
                /*rgb(red,green,blue)表示法 */
                color: rgb(255,0,0);
                color: rgb(0,255,255);
                color: rgb(0,255,0);
                color: rgb(255,0,255);
                color: rgb(0,0,255);
                color: rgb(255,255,0);
                color: rgb(0,0,0);
                color: rgb(255,255,255);
                color: rgb(128,128,128);
                /*十六进制表示法 0~9 A~F */
                color:#FF0000;
                color:#00FF00;
                color:#0000FF;
                color:#000000;
                color:#FFFFFF;
                /*十六进制简写表示法 0~9 A~F */
                color:#F00;
                color:#0F0;
                color:#00F;
                color:#000;
                color:#FFF;
                color:#909090;
                /*带不透明度的颜色
                rgba(r,g,b,alpha)值1完全不透明 0透明到看不见 0.5半透明 */
                color:rgba(255,0,0,1);
                color:rgba(255,0,0,0.8);
                color:rgba(255,0,0,0.4);
                color:rgba(255,0,0,0.2);
                color:rgba(255,0,0,.1);
                color:rgba(255,0,0,0);
            }
            .d1{
                width: 500px;
                height: 300px;
                /*渐变色:角度值(单位为deg),颜色1,颜色2...*/
                background-image: linear-gradient(30deg,red,cyan);
            }
            /*块级元素的默认宽度为父级宽度的100% 高度为0需要靠内容撑起来*/
            .d2{
                width: 50px;
                height: 100px;
                /*插入背景图*/
                background-image: url(img/mr.png);
                /*调整背景图的尺寸:宽度 高度*/
                background-size: 50px 100px;
                /*可以同时设置背景色,没有图的地方显示背景色*/
                background-color:#000;
            }
            .d3{
                width: 500px;
                height: 300px;
                border: 5px solid #F00;
                background-image: url(img/mr.png);
                /*设置背景图不允许重复*/
                background-repeat: no-repeat;
                /*水平方向的正方向是右 垂直方向的正方向是下*/
                background-position: 0 0;/*原点默认在左上角*/
                background-position: -50px 0;/*向左*/
                background-position: 0 50px;/*向下*/
                background-position: 50px -50px;/*向右上*/
                background-position: 50% 50%;/*居中*/
                background-position: 100% 100%;/*右下角*/
                background-position: center center;
                background-position: center;/*两个center可以简写成一个 */
            }
        </style>
    </head>
    <body>
        <h1>测试颜色</h1>
<!--        .d*3 Tab补全-->
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
    </body>
</html>